
import "./index.less"


import BaseContent from "coms/baseContent";
import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { knowledgeDetail, knowledge } from "@/api/article";
import { DeploymentUnitOutlined, EyeOutlined } from '@ant-design/icons';


// import { recommebdList, tagsList, from '@/api/article';
const KnowDetailView = () => {
  const { id } = useParams();
  const [detailInfo, setDatail] = useState([]);
  const [detailChild, setchild] = useState([]);

  const navigate = useNavigate()
  const changedetail = (id) => {
    navigate(`/knowledge/${id}`)

  }

  useEffect(() => {
    knowledgeDetail(id).then((res) => {
      setDatail(res.data.data)
      // console.log(res.data.data.children,"0000");
      //      console.log(detailInfo.children,"ppp");
    })
  }, [detailInfo])

  useEffect(() => {
    knowledgeDetail(id).then((res) => {
      setchild(res.data.data.children)

    })
  }, [detailChild])

  return (
    <div className="big">
      <div className="left">
        <h1>{detailInfo.title}</h1>
        <p><img src={detailInfo.cover} alt="" ></img></p>
        <div className="middle">
          <h1>{detailInfo.title}</h1>
          <p className="summer">{detailInfo.summary}</p>
          <p className="view">{detailInfo.views}次阅读.2022-05-23 11:19:36</p>
          <button>开始阅读</button>
        </div>
        {/* <div dangerouslySetInnerHTML={{ __title: detailInfo.title }}></div> */}
        <div className="buttonn">
          {
            detailChild.map((item, index) => {
              return <p key={index} onClick={() => changedetail(item, id)}>{item.title}</p>
            })
          }
        </div>
      </div>
      <div className="right">
        <BaseContent
          request={async () => {
            const { data: { data } } = await knowledge();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <div key={index} className={"itemList1"} >
                <h2>{item.title}</h2>
                <dl>
                  <dt> <img src={item.cover} alt="" /></dt>
                  <dd>
                    <b>{item.summary}</b>
                    <p>
                      <span><EyeOutlined /> {item.views}</span>
                      <span><DeploymentUnitOutlined />分享</span>
                    </p>
                  </dd>
                </dl>

              </div>
            }
          }

        </BaseContent>
      </div>

    </div>

  )
}

export default KnowDetailView
